<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>操作对象</title>
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script>
        /*
            1. $("元素")   创建指定元素
            2. append(element)   添加成最后一个子元素，由添加者对象调用
            3. appendTo(element) 添加成最后一个子元素，由被添加者对象调用
            4. prepend(element)  添加成第一个子元素，由添加者对象调用
            5. prependTo(element) 添加成第一个子元素，由被添加者对象调用
            6. before(element)    添加到当前元素的前面，两者之间是兄弟关系，由添加者对象调用
            7. after(element)     添加到当前元素的后面，两者之间是兄弟关系，由添加者对象调用
            8. remove()           删除指定元素(自己移除自己)
            9. empty()            清空指定元素的所有子元素
       */
        $(function () {
            // 按钮一：添加一个span到div
            $("#btn1").click(function(){
                let $span = $("<span>span</span>");
                // $("#div").append($span);
                $($span).appendTo("#div");
            });

            // 按钮二：将加油添加到城市列表最下方
            $("#btn2").click(function(){
                // $("#city").append($("#jy"));
                $("#jy").appendTo($("#city"));
            });

            // 按钮三：将加油添加到城市最上方
            $("#btn3").click(function(){
                // $("#city").prepend($("#jy"));
                $("#jy").prependTo($("#city"));
            });

            // 按钮四：将雄起添加到上海下方
            $("#btn4").click(function(){
                $("#sh").after($("#xq"));
            });

            // 按钮五：将雄起添加到上海上方
            $("#btn5").click(function(){
                $("#sh").before($("#xq"));
            })

            // 按钮六：将雄起删除
            $("#btn6").click(function(){
                $("#xq").remove();
            });

            // 按钮七：将描述列表全部删除
            // empty()  清空指定元素的所有子元素,列表结构仍然存在，子元素全部删除
            $("#btn7").click(function(){
                $("#desc").empty();
            });

        });
    </script>
</head>

<body>
    <div id="div"></div>
    <input type="button" id="btn1" value="添加一个span到div"> <br><br><br>

    <input type="button" id="btn2" value="将加油添加到城市列表最下方"> &nbsp;&nbsp;&nbsp;
    <input type="button" id="btn3" value="将加油添加到城市列表最上方"> &nbsp;&nbsp;&nbsp;
    <input type="button" id="btn4" value="将雄起添加到上海下方"> &nbsp;&nbsp;&nbsp;
    <input type="button" id="btn5" value="将雄起添加到上海上方"> &nbsp;&nbsp;&nbsp;
    <ul id="city">
        <li id="bj">北京</li>
        <li id="sh">上海</li>
        <li id="gz">广州</li>
        <li id="sz">深圳</li>
    </ul>
    <ul id="desc">
        <li id="jy">加油</li>
        <li id="xq">雄起</li>
    </ul> <br><br><br>
    <input type="button" id="btn6" value="将雄起删除"> &nbsp;&nbsp;&nbsp;
    <input type="button" id="btn7" value="将描述列表全部删除"> &nbsp;&nbsp;&nbsp;
</body>

</html>